<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        isInline
        ref="formData"
        formItemWidth="120px"
        actionPosition="start"
        :isScalingBtn="false"
        :colNumOfRow="3.5"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :showSelectCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="480"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <el-row type="flex" slot="content_context">
          <el-button
            icon="el-icon-plus"
            type="primary"
            size="mini"
            @click="handleAdd"
          >新增</el-button>
        </el-row>
      </basic-table>
    </el-card>
  </div>
</template>
<script>
import { getBtnsId } from '@/libs/btnsPermission';
import { mapGetters } from 'vuex';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import { requestToData } from '@/api/commonHttp';
export default {
  components: {
    BasicForm,
    BasicTable,
  },
  data () {
    return {
      formItemList: [
        { prop: 'aliasName', label: '别名名称：', type: 'input' },
        { prop: 'keyword', label: '关键词名称：', type: 'input' }
      ],
      formData: {
        aliasName: '', // 别名名称
        keyword: '', // 别名助记码
      },
      tableInfo: {
        list: [],
        columns: [
          { title: '别名名称', key: 'aliasName', fixed: 'left' },
          { title: '商品名称关键词', key: 'keyword' },
          { title: '提交部门', key: 'submitOrgName' },
          { title: '提交人', key: 'submitUserName' },
          { title: '提交时间', key: 'submitTime' },
        ],
        loading: false,
        selection: []
      },
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      },
      pageSizes: [10, 20, 30, 40],
      apiObj: {
        getTableData: { // 获取表格数据 - 列表查询
          url: '/sysback/product/aliasname/listAlias',
          type: 'post'
        }
      }
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      if (this.showBtn('编辑')) {
        return (<div class="table-action">
          <el-button type="text" onClick={() => this.handleEdit(row)}>编辑</el-button>
        </div>);
      }
    },
    // 在mounted时期加载初始数据
    loadInitDataInMounted () {
      this.handleQueryForm();
    },
    // 获取表单内容
    getFormData (data) {
      this.formData = data;
    },
    // 获取表格数据 by 查询表单
    async getTableDataBySearchForm () {
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      const { nowPage, pageShow } = this.pagination;
      const retData = await requestToData({
        url: '/sysback/product/aliasname/listAlias',
        type: 'post',
        data: { nowPage, pageShow, ...this.formData },
      }, () => { this.tableInfo.loading = true }, () => { this.tableInfo.loading = false })
      if (retData) {
        this.tableInfo.list = retData?.results || [];
        this.pagination.totalNum = retData?.totalNum || 0;
      }
    },
    // 表单查询
    handleQueryForm () {
      this.pagination.nowPage = 1;
      this.getTableDataBySearchForm();
    },
    // 页码切换
    handlePageChange (val) {
      this.pagination.nowPage = val;
      this.getTableDataBySearchForm();
    },
    // 每页条数切换
    handlePageSizeChange (val) {
      this.pagination.pageShow = val;
      this.getTableDataBySearchForm();
    },
    // 新增
    handleAdd () {
      this.$router.push({
        name: 'aliasManageAdd', query: { type: 'add' }
      });
    },
    // 编辑
    handleEdit (row) {
      this.$router.push({
        name: 'aliasManageEdit',
        query: { type: 'edit', keywordUuid: row.keywordUuid }
      });
    },
  }
}
</script>
